<template>

	<view style="height: 100%;">
		<view class="centent">
			<view class="titlebox">
				<view class="datitle">
					<text>{{gglist.tiitle}}</text>
				</view>
				<!-- <view class="xiaotitle">
					<text>{{gglist.class_name}}</text>
				</view> -->
			</view>
			<view class="zhongdian">
				<view class="one">
					<text>周工作重点：</text>
				</view>
				<view class="two">
					<rich-text style="font-size: 24rpx;" :nodes="gglist.work_center"></rich-text>
				</view>
			</view>
			<YSteps backgroundColor='#fda54c' linecolor='#2267c2' :infoList='list' v-if="list.length>0"></YSteps>
			<kongyemian v-if="list.length<1"></kongyemian>
			<view class="zhongdian" v-if="list.length>0">
				<view class="one">
					<text style="color: #000000;">家长工作：</text>
				</view>
				<view class="two">
					<rich-text style="font-size: 24rpx;color: #000000;" :nodes="gglist.jiazhang_work"></rich-text>
				</view>
			</view>
			<view class="zhongdian zhongdian1" v-if="list.length<1">
				<view class="one">
					<text style="color: #000000;">家长工作：</text>
				</view>
				<view class="two">
					<rich-text style="font-size: 24rpx;color: #000000;" :nodes="gglist.jiazhang_work"></rich-text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	import YSteps from '../../components/Y-Steps/Y-Steps.vue'


	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},
		components: {
			YSteps
		},
		data() {
			return {
				gglist: {},
				id: 0,
				list: []
			}
		},
		methods: {
			kebiaoxiangqingshow() {
				this.$store
					.dispatch('kebiaoxiangqing', {
						token: this.userInfo.token,
						kebiao_id: this.id

					})
					.then(res => {
						
						this.gglist = res.data.data;
						this.list = res.data.data.kebiao;
						for(var i=0;i<this.list.length;i++){
							if((!this.list[i].chenjian) &&  (!this.list[i].shangwu) && (!this.list[i].xiawu)){
								this.list.splice(i)
							}
						}
						
					});
			},

		},
		onLoad(data) {
			this.id = data.id
			
		},
		onShow() {
			if (!this.isLogin) {
				if (uni.getStorageSync("token")) { //判断是否有token，然后调用自动登录的接口
					this.$store
						.dispatch('loginByWexin')
						.then(res => {
							this.code = res
							this.$store
								.dispatch('apiUserAutoLogin', {
									token: uni.getStorageSync("token")
								})
								.then(res => {
									this.kebiaoxiangqingshow()
								});
						});
				} else { //没有token，去登录页面点击登录				
					uni.navigateTo({
						url: '../login/login'
					})
				}
		
			} else {
				this.kebiaoxiangqingshow()
			}
		}
	}
</script>

<style lang="less">
	page {
		height: 100%;
	}

	.centent {
		position:relative;
		background-image: url(../../static/keding.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		height: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;

		.titlebox {
			.datitle {
				width: 100%;
				text-align: center;
				color: #fff;
				font-size: 40rpx;
			}

			.xiaotitle {
				width: 100%;
				text-align: right;
				font-size: 30rpx;
				color: #fff;
			}
		}

		.zhongdian {
			
			margin-bottom: 40rpx;
			
			.one {
				color: #fff;
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.two {
				color: #fff;
				font-size: 26rpx;
			}
		}
		.zhongdian1{
			padding: 0 20rpx;
			position: fixed;
			bottom: 40rpx;
			left: 0;
		}


	}
</style>
